<template>
  <div :style="{ transform: show ? 'scale(1)' : 'scale(0)' }" class="bg" @click="exit">
    <div class="surface_container" @click.stop="">
      <div ref="surfaceBox" id="surfaceBox" style="width: 100%; height: 100%"></div>
      <div class="exit" @click="exit"><i class="el-icon-circle-close"></i></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: true,
    option: {
      type: Object,
      default() {
        return {
          title: {},
          legend: { data: [] },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          tooltip: {
            formatter: params => {
              return `
              时间：${params.name}<br>
              点位高程:${params.data.toFixed(2)}
              `
            },
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              symbolSize: 15,
            },
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          animation: false,
        }
      },
    },
    data() {
      return {
        myChart: null,
      }
    },
  },
  data() {
    return {}
  },
  mounted() {
    this.myecharts()
  },
  methods: {
    myecharts() {
      // let dom = document.getElementById('surfaceBox')
      let dom = this.$refs.surfaceBox
      this.myChart = this.$echarts.init(dom)
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      if (this.option) {
        this.myChart.setOption(this.option)
        this.myChart.getZr().on('mousedown', params => { 
        })
      }
    },
    exit() {
      this.$emit('exit')
    },
    setOption(data) {
      console.log(data)
      this.option.title.txt = data.titleTxt
      this.option.legend.data[0] = data.titleTxt
      this.option.series[0].name = data.titleTxt
      this.option.xAxis.data = data.seriesData.map((item, index) => {
        return item.createDate
      })
      this.option.xAxis.myDatas = data.seriesData
      this.option.series[0].data = data.seriesData.map(item => {
        return item.archHeight
      })
      this.myChart.setOption(this.option)
    },
  },
}
</script>

<style lang="scss">
.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  .surface_container {
    box-sizing: border-box;
    padding: 50px;
    position: absolute;
    width: 90vw;
    height: 90vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    overflow: visible;
    border-radius: 8px;
    .surface_box {
    }
    .exit {
      position: absolute;
      right: 3px;
      top: 0;
      font-size: 30px;
      color: rgb(85, 85, 85);
      transition: 0.1s;
    }
    .exit:hover {
      color: rgb(0, 0, 0);
      font-weight: 700;
    }
  }
}
</style>